<template>
  <view class="record-container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="type-filter">
        <text 
          v-for="(type, index) in recordTypes"
          :key="index"
          :class="{ active: currentType === type.value }"
          @tap="selectType(type.value)"
        >{{ type.label }}</text>
      </view>
    </view>
    
    <!-- 记录列表 -->
    <scroll-view 
      scroll-y 
      class="record-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
    >
      <view 
        class="record-item card"
        v-for="(record, index) in filteredRecords"
        :key="index"
      >
        <view class="header">
          <view class="vaccine-info">
            <text class="name">{{ $t(record.vaccineNameKey) }}</text>
            <text class="status" :class="record.status">{{ record.statusText }}</text>
          </view>
          <text class="time">{{ record.time }}</text>
        </view>
        
        <view class="clinic-info">
          <image :src="record.clinicImage" mode="aspectFit" class="logo" />
          <view class="info">
            <text class="name">{{ record.clinicName }}</text>
            <text class="address">{{ record.clinicAddress }}</text>
          </view>
        </view>
        
        <view class="detail-info">
          <view class="info-item">
            <text class="label">接种人</text>
            <text class="value">{{ record.patientName }}</text>
          </view>
          <view class="info-item">
            <text class="label">接种剂次</text>
            <text class="value">{{ record.doseNumber }}</text>
          </view>
          <view class="info-item">
            <text class="label">疫苗批号</text>
            <text class="value">{{ record.batchNo }}</text>
          </view>
        </view>
        
        <view class="footer">
          <view class="fee-info">
            <text class="label">接种费用</text>
            <text class="price" v-if="record.fee > 0">MOP {{ record.fee }}</text>
            <text class="free" v-else>免费</text>
          </view>
          <view class="actions">
            <button 
              class="action-btn"
              v-if="record.status === 'upcoming'"
              @tap="cancelAppointment(record)"
            >取消预约</button>
            <button 
              class="action-btn"
              v-if="record.status === 'completed'"
              @tap="viewCertificate(record)"
            >查看证明</button>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text>加载中...</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredRecords.length === 0">
        <image src="/static/empty/no-records.png" mode="aspectFit" />
        <text>暂无接种记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 记录类型
const recordTypes = [
  { label: '全部', value: 'all' },
  { label: '待接种', value: 'upcoming' },
  { label: '已完成', value: 'completed' },
  { label: '已取消', value: 'cancelled' }
]

const currentType = ref('all')
const refreshing = ref(false)
const hasMore = ref(true)

// 接种记录数据
const records = ref([
  {
    id: 1,
    vaccineNameKey: 'vaccine.list.covid.name',
    status: 'upcoming',
    statusText: '待接种',
    time: '2024-03-25 09:30',
    clinicName: '澳门镜湖医院预防接种门诊',
    clinicAddress: '澳门连胜马路33号',
    clinicImage: '/static/hospital/kiang-wu.jpg',
    patientName: '张三',
    doseNumber: '第1剂',
    batchNo: 'BN2024001',
    fee: 0
  },
  {
    id: 2,
    vaccineNameKey: 'vaccine.list.flu.name',
    status: 'completed',
    statusText: '已完成',
    time: '2024-03-20 15:00',
    clinicName: '澳门科大医院疫苗中心',
    clinicAddress: '澳门氹仔大学大马路',
    clinicImage: '/static/hospital/must.jpg',
    patientName: '张三',
    doseNumber: '第1剂',
    batchNo: 'BN2024002',
    fee: 180
  }
])

// 筛选记录
const filteredRecords = computed(() => {
  if (currentType.value === 'all') {
    return records.value
  }
  return records.value.filter(record => record.status === currentType.value)
})

// 选择类型
const selectType = (type) => {
  currentType.value = type
}

// 取消预约
const cancelAppointment = (record) => {
  uni.showModal({
    title: '取消预约',
    content: '确定要取消该预约吗？',
    success: (res) => {
      if (res.confirm) {
        // 调用取消预约接口
        console.log('取消预约:', record.id)
      }
    }
  })
}

// 查看接种证明
const viewCertificate = (record) => {
  uni.navigateTo({
    url: `/pages/vaccine/certificate?id=${record.id}`
  })
}

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  // 重新加载数据
  loadRecords()
  setTimeout(() => {
    refreshing.value = false
  }, 1000)
}

// 加载更多
const onLoadMore = () => {
  if (!hasMore.value) return
  loadRecords()
}

// 加载记录数据
const loadRecords = () => {
  // 这里应该调用API获取数据
  // 模拟加载
  setTimeout(() => {
    hasMore.value = false
  }, 1000)
}
</script>

<style lang="scss">
.record-container {
  min-height: 100vh;
  background: $bg-color;
  
  .filter-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 20rpx;
    box-shadow: $shadow-sm;
    
    .type-filter {
      display: flex;
      justify-content: space-around;
      
      text {
        font-size: 28rpx;
        color: $text-regular;
        padding: 12rpx 30rpx;
        border-radius: $radius-xl;
        transition: all 0.3s;
        
        &.active {
          color: #fff;
          background: $primary-gradient;
        }
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  
  .record-list {
    height: calc(100vh - 120rpx);
    padding: 20rpx;
    
    .record-item {
      margin-bottom: 20rpx;
      
      .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20rpx;
        
        .vaccine-info {
          .name {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .status {
            font-size: 24rpx;
            padding: 4rpx 12rpx;
            border-radius: $radius-sm;
            
            &.upcoming {
              color: $primary-color;
              background: $primary-light;
            }
            
            &.completed {
              color: $success;
              background: rgba($success, 0.1);
            }
            
            &.cancelled {
              color: $text-secondary;
              background: rgba($text-secondary, 0.1);
            }
          }
        }
        
        .time {
          font-size: 26rpx;
          color: $text-secondary;
        }
      }
      
      .clinic-info {
        display: flex;
        align-items: center;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eee;
        
        .logo {
          width: 60rpx;
          height: 60rpx;
          border-radius: $radius-sm;
          margin-right: 16rpx;
        }
        
        .info {
          .name {
            font-size: 28rpx;
            color: $text-primary;
            margin-bottom: 4rpx;
            display: block;
          }
          
          .address {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
      }
      
      .detail-info {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        .info-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .label {
            font-size: 26rpx;
            color: $text-regular;
          }
          
          .value {
            font-size: 26rpx;
            color: $text-primary;
          }
        }
      }
      
      .footer {
        padding-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .fee-info {
          .label {
            font-size: 26rpx;
            color: $text-regular;
            margin-right: 12rpx;
          }
          
          .price {
            font-size: 32rpx;
            color: $danger;
            font-weight: bold;
          }
          
          .free {
            font-size: 32rpx;
            color: $success;
            font-weight: bold;
          }
        }
        
        .actions {
          display: flex;
          gap: 20rpx;
          
          .action-btn {
            height: 60rpx;
            line-height: 60rpx;
            padding: 0 30rpx;
            font-size: 26rpx;
            color: $primary-color;
            background: $primary-light;
            border-radius: $radius-xl;
            
            &:active {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
  
  .empty-state {
    padding: 120rpx 0;
    text-align: center;
    
    image {
      width: 240rpx;
      height: 240rpx;
      margin-bottom: 30rpx;
    }
    
    text {
      font-size: 28rpx;
      color: $text-secondary;
    }
  }
}
</style> 